<template>
  <div class="vmui-switch">
    <label class="vmui-switch-inner-wrap">
      <input class="vmui-switch-input" :disabled="disabled" @change="$emit('change', currentValue)" type="checkbox" v-model="currentValue">
      <span class="vmui-switch-core" :class="{checked: currentValue, disabled: disabled}"></span>
      <span class="vmui-switch-label"><slot></slot></span>
    </label>
  </div>
</template>

<script>
  export default {
    name: 'vmSwitch',
    props: {
      value: Boolean,
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      currentValue: {
        get () {
          return this.value
        },
        set (val) {
          this.$emit('input', val)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "styleMix";
  @include vmui-switch;
</style>
